import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/404.vue';
import { useAppStore } from '@/stores/modules/app'; // 引入 Pinia store

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: () => import('../views/account/Login.vue'),
      hidden: true
    },
    {
      path: '/',
      name: 'home',
      component: HomeView,
      hidden: true
    },
    {
      path: '/home',
      name: 'Admin',
      component: () => import('@/layout/index.vue'),
      meta: { roles: ['admin', 'designer'] },
    },
    {
      path: '/user',
      name: 'User',
      meta: {
        title: '用户管理',
        icon: 'user',
        roles: ['admin'] // 添加 roles 字段
      },
      component: () => import('@/layout/index.vue'),
      children: [
        {
          path: 'user-index',
          name: 'UserIndex',
          meta: {
            title: '用户管理',
            roles: ['admin'] // 添加 roles 字段
          },
          component: () => import('@/views/user/index.vue')
        }
      ]
    },
    {
      path: '/designer',
      name: 'Designer',
      meta: {
        title: '搭配师管理',
        icon: 'designer',
        roles: ['admin'] // 添加 roles 字段
      },
      component: () => import('@/layout/index.vue'),
      children: [
        {
          path: '/designer-index',
          name: 'DesignerIndex',
          meta: {
            title: '搭配师管理',
            roles: ['admin'] // 添加 roles 字段
          },
          component: () => import('@/views/designer/index.vue')
        }
      ]
    },
    {
      path: '/matching-category',
      name: 'Category',
      meta: {
        title: '搭配类别',
        icon: 'category',
        roles: ['admin', 'designer'] // 添加 roles 字段
      },
      component: () => import('@/layout/index.vue'),
      children: [
        {
          path: '/category-index',
          name: 'CategoryIndex',
          meta: {
            title: '搭配类别',
            roles: ['admin', 'designer'] // 添加 roles 字段
          },
          component: () => import('@/views/category/index.vue')
        }
      ]
    },
    {
      path: '/outfit',
      name: 'Outfit',
      meta: {
        title: '服装搭配',
        icon: 'outfit',
        roles: ['admin', 'designer'] // 添加 roles 字段
      },
      component: () => import('@/layout/index.vue'),
      children: [
        {
          path: '/outfit-index',
          name: 'OutfitIndex',
          meta: {
            title: '服装搭配',
            roles: ['admin', 'designer'] // 添加 roles 字段
          },
          component: () => import('@/views/outfit/index.vue')
        }
      ]
    },
    {
      path: '/feedback',
      name: 'Feedback',
      meta: {
        title: '反馈管理',
        icon: 'feedback',
        roles: ['admin'] // 添加 roles 字段
      },
      component: () => import('@/layout/index.vue'),
      children: [
        {
          path: '/feedback-index',
          name: 'FeedbackIndex',
          meta: {
            title: '反馈管理',
            roles: ['admin'] // 添加 roles 字段
          },
          component: () => import('@/views/feedback/index.vue')
        }
      ]
    },
    {
      path: '/product-link',
      name: 'ProductLink',
      meta: {
        title: '搭配链接',
        icon: 'link',
        roles: ['admin'] // 添加 roles 字段
      },
      component: () => import('@/layout/index.vue'),
      children: [
        {
          path: '/link-index',
          name: 'LinkIndex',
          meta: {
            title: '搭配链接',
            roles: ['admin'] // 添加 roles 字段
          },
          component: () => import('@/views/link/index.vue')
        }
      ]
    },
    {
      path: '/404',
      component: () => import('@/views/404.vue'),
      hidden: true
    },
    {
      path: '/:pathMatch(.*)*',
      redirect: '/404',
      hidden: true
    }
  ]
});

// 路由守卫
router.beforeEach((to, from, next) => {
  const appStore = useAppStore(); // 获取 Pinia store 实例
  console.log('appStore',appStore,appStore.role)
  const userRoles = [appStore.role]; // 获取用户角色
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  const requiredRoles = to.matched.some(record => record.meta.roles);

  if (requiresAuth && !appStore.token) {
    // 如果需要认证但没有 token，重定向到登录页面
    next('/login');
  } else if (requiredRoles) {
    // 如果需要角色判断
    const hasAccess = to.matched.every(record => {
      return !record.meta.roles || record.meta.roles.some(role => userRoles.includes(role));
    });

    if (hasAccess) {
      next();
    } else {
      // 如果没有权限，重定向到 404 页面或其他页面
      next('/login');
    }
  } else {
    next();
  }
});

export default router;